<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <!--
        * @作者: 陈会丽 *
        * @时间：2024-2025-1 *
        -->
    </head>
    <body>
        <div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
		</div>
        <style>
			.wrap {
				width: 320px;
				height: 320px;
				margin: 100px auto;
				position: relative;/* **ralative(相对定位)** */
				animation: rotate 3s linear infinite;
			}
			.box1,
			.box2,
			.box3,
			.box4 {
				width: 160px;
				height: 160px;
				position: absolute;/* **absolute**（绝对定位） */
			}
			.box1 {
				left: 80px;
				top: 0px;
				border-radius: 50%;
				background-color: brown;
				/* 线性渐变 */
				background: linear-gradient(to right, #00ced1 30%, transparent 50%);
			}
			.box2 {
				left: 160px;
				top: 80px;
				border-radius: 50%;
				background-color: brown;
				/* 线性渐变 */
				background: linear-gradient(#ff4500 30%, transparent 50%);
			}
			.box3 {
				left: 80px;
				top: 160px;
				border-radius: 50%;
				background-color: brown;
				/* 线性渐变 */
				background: linear-gradient(to left, #ffc0cb 30%, transparent 50%);
			}
			.box4 {
				left: 0px;
				top: 80px;
				border-radius: 50%;
				background-color: brown;
				/* 线性渐变 */
				background: linear-gradient(transparent 40%, #d4dc14 80%);
			}
			@keyframes rotate {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}
		</style>
    </body>
</html>